import React, { useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Input, Select, Calendar, theme, Modal, Form, DatePicker, Upload, notification,message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Dayjs } from 'dayjs';
import { useSelector, useDispatch } from 'react-redux';
import './Teacheradd.scss'
import service from '../../../api'
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
import {
    LeftOutlined,
    DownCircleOutlined
} from '@ant-design/icons';

const App = () => {
    var navigate = useNavigate();
    //选择器
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };


    //日历相关
    const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };
    const { token } = theme.useToken();

    const wrapperStyle: React.CSSProperties = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };







    
    var onFinish = async (values: any) => {
        console.log(values);
        var res = await axios({
            method: 'post',
            url: " http://localhost:3000/postgjc",
            data: { 
               
                username: values.username,
                bumeng: values.bumeng,
                xingbie: values.xingbie,
                jiaoyu: values.jiaoyu,
                phone: values.phone,
                youxiang: values.youxiang,
                shijian: values.shijian.format('YYYY-MM-DD').toString(),
            }
        }).then(res => {
            // console.log("成功");
            message.success('新增成功！');
            // navigate('/index/course')
        }).catch(error => {
            // console.log("失败");
            message.error('新增失败！');
        })

        // var res = await service.teacher.teacher_add(values);
        // navigate('/index/teacherlist');
    }
    //表单验证失败时执行
    var onFinishFailed = () => {

    }
    return (
        <div className='app'>

            <div className="topp">
                <div className="left">
                    新增教师
                </div>
                <div className="right">
                    <LeftOutlined /> 返回
                </div>
            </div>
            <Form
                className='form'
                // style={{ maxWidth: 600 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="id"
                    name="id"
                    hidden
                >
                    <Input />
                </Form.Item>
                <div className="button">
                    <div className="tou">

                        <p> 基本信息</p>
                    </div>
                    <div className="xia">

                        <div className="list" >

                            <div className="left">
                                名字
                                <Form.Item

                                    name="username"
                                    rules={[{ required: true, message: '请输入名字!' }]}
                                >
                                    <Input placeholder="用户名" />
                                </Form.Item>

                            </div>
                            <div className="right">
                                电子邮箱
                                <Form.Item

                                    name="youxiang"
                                    rules={[{ required: true, message: '请输入邮箱!' }]}
                                >
                                    <Input placeholder="电子邮箱" />
                                </Form.Item>
                            </div>
                        </div>
                        <div className="list" >
                            <div className="left">
                                联系电话
                                <Form.Item

                                    name="phone"
                                    rules={[{ required: true, message: '请输入联系电话!' }]}
                                >
                                    <Input placeholder="联系电话" />
                                </Form.Item>
                            </div>
                            <div className="right">
                                性别
                                <Form.Item

                                    name="xingbie"
                                    rules={[{ required: true, message: '请输入性别!' }]}
                                >
                                <Select
                                    className='xingbie'
                                    defaultValue="性别"
                                    // style={{ width: 432 }}
                                    onChange={handleChange}
                                    options={[

                                        { label: '男', value: '男' },
                                        { label: '女', value: '女' },


                                    ]}
                                />
                                 </Form.Item>
                            </div>
                        </div>
                        <div className="list" >
                            <div className="left">
                                所属部门
                                <Form.Item

                                    name="bumeng"
                                    rules={[{ required: true, message: '请输入部门!' }]}
                                >
                                    <Select
                                        className='bumeng'
                                        defaultValue="部门一"
                                        // style={{ width: 432 }}
                                        onChange={handleChange}

                                        options={[

                                            { label: '部门一', value: '部门一' },
                                            { label: '部门二', value: '部门二' },
                                            { label: '部门三', value: '部门三' },
                                            { label: '部门四', value: '部门四' },

                                        ]}
                                    />
                                </Form.Item>
                            </div>
                            <div className="right">
                                教育
                                <Form.Item

                                    name="jiaoyu"
                                    rules={[{ required: true, message: '请输入学历!' }]}
                                >
                                    <Input placeholder="教育" />
                                </Form.Item>
                            </div>
                        </div>
                        <div className="list" >
                            <div className="left">
                                出生日期

                               
                                   
                                    <DatePicker placeholder='年/月/日' className='ri' />
                                
                            </div>
                            <div className="right">
                                加入日期

                                <Form.Item
                                    name="shijian">

                                    <DatePicker placeholder='年/月/日' className='ri' />
                                </Form.Item>
                            </div>
                        </div>
                        <div className="list1" >
                            <div className="left">
                                登录密码
                              
                                    <Input placeholder="请输入登录密码" />
                                

                            </div>
                            <div className="right">
                                确认密码
                                
                                    
                                
                                    <Input placeholder="请输入确认密码" />
                               
                            </div>
                        </div>
                    
                    </div>
                    <div className="wei">
                        <div className="top1">
                            <p>头像照片</p>
                        </div>
                        <div className="zhong">
                            <div className="chuan">
                                <Form.Item valuePropName="fileList" >
                                    <Upload action="/upload.do" listType="picture-card">
                                        <div>
                                            <PlusOutlined />
                                            <div style={{ marginTop: 8 }}>Upload</div>
                                        </div>
                                    </Upload>
                                </Form.Item>
                            </div>
                            <div className="button1">

                            </div>
                            <p>
                                单文件大小请在1M以内,仅支持JPG、JPEG、PNG格式
                            </p>

                        </div>
                        <div className="xia">

                        </div>
                    </div>
                    <div className="ti">
                        <Button type="primary" className='quxiao' >
                            取消
                        </Button>
                        &nbsp;&nbsp;
                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </div>

                </div>
            </Form>


        </div >
    );
};

export default App;